<template>
  <div ref="screenFull" style="width: 100%">
    <el-card>
      <div v-if="title.length > 0" slot="header" class="clearfix">
        <span>{{ title }}</span>
      </div>
      <div
        ref="codeBox"
        style="display: flex; overflow: auto; position: relative"
      >
        <editor
          ref="aceEditor"
          v-model="content"
          width="100%"
          :height="fullScreen ? offsetHeight : boxHeight"
          :lang="lang"
          :theme="theme"
          :options="{
            enableBasicAutocompletion: true,
            enableSnippets: true,
            enableLiveAutocompletion: true,
            tabSize: 4,
            fontSize: fontSize,
            readOnly: readOnly, //设置是否只读
            showPrintMargin: false, //去除编辑器里的竖线
          }"
          @init="editorInit"
          @input="changeCode"
        />
        <div
          v-if="scale"
          ref="containerDom"
          class="dragSvg"
          @mousedown.stop.prevent="drag"
        >
          <svg
            t="1722828989390"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="3536"
            width="25"
            height="25"
          >
            <path
              d="M247.741935 197.532903l6.606452 23.783226h524.552258c13.212903 0 23.783226 10.570323 23.783226 23.783226v524.552258c0 13.212903-10.570323 23.783226-23.783226 23.783226H254.348387c-13.212903 0-23.783226-10.570323-23.783226-23.783226V245.099355c0-13.212903 10.570323-23.783226 23.783226-23.783226l6.606452-23.783226-6.606452-23.783226c-39.63871 0-71.349677 31.710968-71.349677 71.349678v524.552258c0 39.63871 31.710968 71.349677 71.349677 71.349677h524.552258c39.63871 0 71.349677-31.710968 71.349678-71.349677V245.099355c0-39.63871-31.710968-71.349677-71.349678-71.349678H254.348387v23.783226h-6.606452z"
              p-id="3537"
              fill="#bfbfbf"
            />
            <path
              d="M383.174194 774.276129l-69.367742-1.32129c-13.212903 0-25.765161-5.945806-34.353549-15.855484-8.588387-9.909677-13.212903-23.122581-11.891613-36.335484l6.606452-70.028387c1.32129-13.212903 12.552258-22.461935 25.765161-21.80129 13.212903 1.32129 22.461935 12.552258 21.801291 25.765161l-6.606452 70.028387 70.028387 1.32129c13.212903 0 23.783226 11.230968 23.122581 24.443871-0.660645 13.873548-11.891613 24.443871-25.104516 23.783226z"
              p-id="3538"
              fill="#bfbfbf"
            />
            <path
              d="M660.645161 260.294194l70.689033 1.32129c13.212903 0 25.765161 5.945806 34.353548 15.855484 8.588387 9.909677 13.212903 23.122581 11.891613 36.335484l-6.606452 68.707096c-1.32129 13.212903-13.212903 22.461935-25.765161 21.140646-13.212903-1.32129-22.461935-13.212903-21.140645-25.765162l6.606451-68.707097-70.689032-1.32129c-13.212903 0-23.783226-11.230968-23.122581-24.443871 0-13.212903 10.570323-23.122581 23.783226-23.12258z"
              p-id="3539"
              fill="#bfbfbf"
            />
            <path
              d="M334.947097 742.565161L430.08 647.432258c9.249032-9.249032 9.249032-24.443871 0-33.692903-9.249032-9.249032-24.443871-9.249032-33.692903 0l-95.132903 95.132903c-9.249032 9.249032-9.249032 24.443871 0 33.692903 9.249032 9.249032 24.443871 9.249032 33.692903 0"
              p-id="3540"
              fill="#bfbfbf"
            />
            <path
              d="M650.074839 420.830968l95.132903-95.132903c9.249032-9.249032 9.249032-24.443871 0-33.692904-9.249032-9.249032-24.443871-9.249032-33.692903 0L616.381935 387.138065c-9.249032 9.249032-9.249032 24.443871 0 33.692903 9.249032 9.249032 24.443871 9.249032 33.692904 0"
              p-id="3541"
              fill="#bfbfbf"
            />
          </svg>
        </div>
      </div>
      <div
        style="display: flex; width: 100%; margin-right: 20px; margin-top: 10px"
      >
        <button class="copy-btn" @click="copyCode()">复制</button>
        <button class="copy-btn" @click="screen()">
          {{ fullScreen ? "退出全屏" : "全屏" }}
        </button>
        <slot name="domainButton" />
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  components: {
    editor: require('vue2-ace-editor')
  },
  props: {
    // eslint-disable-next-line vue/require-default-prop
    changeCode: {
      type: Function
    },
    title: {
      type: String,
      default: ''
    },
    scale: {
      type: Boolean,
      default: true
    },
    ednitWidth: {
      type: String,
      default: '100%'
    },
    // 编辑框高度
    editorHight: {
      type: Number,
      default: 300
    },
    // 是否只读
    readOnly: {
      type: Boolean,
      default: false
    },
    // 要展示的代码
    codeData: {
      type: String,
      default: ''
    },
    // 默认的主题
    valueTheme: {
      type: String,
      default: 'dracula'
    },
    // 默认的语言
    valueCodeLang: {
      type: String,
      default: 'sql'
    },
    // 默认的语言
    valueFontSize: {
      type: Number,
      default: 16
    }
  },
  data() {
    return {
      listTheme: [
        'clouds',
        'clouds_midnight',
        'dracula',
        'chrome',
        'chaos',
        'xcode',
        'monokai',
        'ambiance',
        'dreamweaver',
        'eclipse',
        'github',
        'idle_fingers'
      ],
      listCodeLang: ['pgsql', 'sqlserver', 'mysql', 'sql', 'groovy'],
      listFontSize: [10, 12, 14, 16, 20],
      content: '',
      theme: '',
      lang: '',
      fontSize: 12,
      tmpFontSize: 12,
      fullScreen: false,
      unFullEditorHight: 0, // 非全屏状态下的编辑器高度
      appendToBody: true,
      startWidth: 0,
      startHeight: 0,
      startX: 0,
      startY: 0,
      boxWidth: 0,
      boxHeight: 0,
      dragging: false
    }
  },
  created() {
    // 初始化主题、语言、大小
    this.theme = this.valueTheme
    this.lang = this.valueCodeLang
    this.fontSize = this.tmpFontSize = this.valueFontSize
    this.boxWidth = this.$props.ednitWidth ? this.$props.ednitWidth : '100%'
    this.boxHeight = this.$props.editorHight ? this.$props.editorHight : 300
    this.offsetHeight = document.body.offsetHeight
  },
  mounted() {
    // // 初始化编辑器
    this.editorInit()
    this.unFullEditorHight = this.editorHight // 缓存浏览器高度
    // 若传输代码，则展示代码
    if (this.codeData) {
      this.$refs.aceEditor.editor.setValue(this.codeData)
    }
    // ESC按键事件无法监听，监听窗口变化
    window.onresize = () => {
      this.fullScreen = this.checkFull()
    }
  },

  methods: {
    drag(e) {
      e.preventDefault()
      this.dragging = true
      const codeBoxEl = this.$refs.codeBox
      this.startWidth = codeBoxEl.offsetWidth
      this.startHeight = codeBoxEl.offsetHeight
      this.startX = e.clientX
      this.startY = e.clientY
      document.addEventListener('mousemove', this.doDrag)
      document.addEventListener('mouseup', this.stopDrag)
    },
    doDrag(event) {
      if (this.dragging) {
        this.boxWidth = this.startWidth + event.clientX - this.startX
        this.boxHeight = this.startHeight + event.clientY - this.startY
        if (this.boxHeight < 150) {
          this.boxHeight = 150
        }
      }
    },
    stopDrag() {
      this.dragging = false
      document.removeEventListener('mousemove', this.doDrag)
      document.removeEventListener('mouseup', this.stopDrag)
    },
    selectTheme(newValue) {
      if (newValue) {
        this.theme = newValue
      }
    },
    selectLang(newValue) {
      if (newValue) {
        this.lang = newValue
      }
    },
    selectFontSize(newValue) {
      if (newValue) {
        this.fontSize = newValue
        this.tmpFontSize = newValue
      }
    },
    editorInit() {
      // 初始化
      require('brace/ext/language_tools')
      require('brace/ext/beautify')
      require('brace/ext/error_marker')
      require('brace/ext/searchbox')
      require('brace/ext/split')

      // 循坏加载语言，通过点击按钮切换
      for (let s = 0; s < this.listCodeLang.length; s++) {
        require('brace/snippets/' + this.listCodeLang[s])
      }
      for (let j = 0; j < this.listCodeLang.length; j++) {
        require('brace/mode/' + this.listCodeLang[j])
      }

      // 循坏加载主题，通过点击按钮切换
      for (let i = 0; i < this.listTheme.length; i++) {
        require('brace/theme/' + this.listTheme[i])
      }
    },

    copyCode() {
      const code = this.$refs.aceEditor.editor.getValue()

      // 复制到剪切板
      this.copyEl(code)
      this.$message.success('复制成功')
    },
    copyEl(text) {
      const input = document.createElement('textarea')
      input.value = text
      document.body.appendChild(input)
      input.select()
      document.execCommand('copy')
      document.body.removeChild(input)
    },

    formatCode() {
      const code = this.$refs.aceEditor.editor.getValue()
      if (code !== '') {
        const string = JSON.stringify(JSON.parse(code), null, 2)
        this.$refs.aceEditor.editor.setValue(string)
      }
    },

    getValue() {},

    checkFull() {
      // 用来监听编辑器大小是否变化
      // 火狐浏览器
      const isFull =
        document.mozFullScreen ||
        document.fullScreen ||
        // 谷歌浏览器及Webkit内核浏览器
        document.webkitIsFullScreen ||
        document.webkitRequestFullScreen ||
        document.mozRequestFullScreen ||
        document.msFullscreenEnabled

      if (!isFull) {
        // false时 ：非全屏
        this.editorHight = this.unFullEditorHight
      }

      return !!isFull
    },
    screen() {
      this.valueFontSize = this.fontSize = 12 // 大小变更后初始化文字大小（不定义也会变为12 组件bug）
      const element = this.$refs.screenFull

      if (this.fullScreen) {
        this.appendToBody = true
        this.editorHight = this.unFullEditorHight
        // 关闭全屏
        if (document.exitFullscreen) {
          document.exitFullscreen()
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen()
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen()
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen()
        }
      } else {
        this.appendToBody = false
        // 全屏
        this.editorHight = window.screen.availHeight - 50
        if (element.requestFullscreen) {
          element.requestFullscreen()
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen()
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen()
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen()
        }
      }

      this.fullScreen = !this.fullScreen

      // setTimeout(() => {
      //     this.fontSize = this.tmpFontSize
      // }, 200)
    }
  }
}
</script>

<style lang="scss" scoped>
.dragSvg {
  position: absolute;
  z-index: 999;
  bottom: 0;
  right: 0;

  .icon {
    cursor: move;
    transform: rotate(90deg);
  }
}

::v-deep .el-card {
  transition: null;
}

.copy-btn {
  margin-right: 10px !important;
}
</style>
